<html>
    <head>
        <meta charset="utf-8">
    	<title>简易选项卡</title>
    	<style type="text/css">
            #outer{height: 300px;width: 500px;margin: 0 auto;border: 1px solid #000;font-size: 12px;}
            ul,li{margin: 0px; padding: 0px;}
            #tab{background: #000; height: 30px;}
            #tab li{float: left;color: #fff; text-align: center;list-style: none;width: 80px; height: 30px; line-height: 30px;}
            #tab li.current{background: #ccc;color: #000;}
            #oul{height: 280px;padding-left: 20px; margin: 15px;}
            #oul ul{display: none;}
    	</style>
    </head>
    <body>
        <div id="outer">
            <ul id="tab">
                <li class="current">第一课</li>
                <li>第二课</li>
                <li>第三课</li>
            </ul>
            <div id="oul">
            <ul style="display:block;">
                <li>1</li>
                <li>2</li>
                <li>3</li>
            </ul>
            <ul>
                <li>4</li>
                <li>5</li>
                <li>6</li>
            </ul>
            <ul>
                <li>7</li>
                <li>8</li>
                <li>9</li>
            </ul>
            <div>
        </div>
    </body>
    <script type="text/javascript">
        window.onload=function  () {
            var oli=document.getElementById('tab').getElementsByTagName('li');
            var odiv=document.getElementById('oul').getElementsByTagName('ul');
            for(var i=0;i<oli.length;i++){
                oli[i].index=i;
                oli[i].onmouseover=function(){
                for(var n=0;n<oli.length;n++){
                    oli[n].className="";
                    this.className="current";
                }
                for(var n=0;n<odiv.length;n++){
                    odiv[n].style.display="";
                    odiv[this.index].style.display="block";
                }
            }
            }
        }
    </script>
</html>